<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>大翔五子棋</title>

    <link rel="shortcut icon" href="/static/images/favicon.ico" >
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/datepicker3.css" rel="stylesheet">
    <link href="/static/css/styles.css" rel="stylesheet">

    <!--[if lt IE 9]>
<script src="/staic/js/html5shiv.js"></script>
<script src="/staic/js/respond.min.js"></script>
<![endif]-->

</head>

<body>

<div class="row">
    <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2 col-md-4 col-md-offset-4">
        <div class="login-panel panel panel-default">
            <div class="panel-heading">欢迎加入</div>
            <div class="panel-body">
                <form role="form">
                    <fieldset>
                        <div class="form-group">
                            <input class="form-control" placeholder="用户名" name="user" type="email" autofocus="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="密码" name="password" type="password" value="">
                        </div>
                        <div class="form-group">
                            <input class="form-control" placeholder="确认密码" name="password2" type="password" value="">
                        </div>

                        <a class="btn btn-primary" onclick="register()">注册</a>
                    </fieldset>
                </form>
            </div>
        </div>
        {% for message in get_flashed_messages() %}
            {{ message }}
        {% endfor %}
    </div><!-- /.col-->
</div><!-- /.row -->


<script src="/static/js/jquery-1.12.4.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/chart.min.js"></script>
<script src="/static/js/chart-data.js"></script>
<script src="/static/js/easypiechart.js"></script>
<script src="/static/js/easypiechart-data.js"></script>
<script src="/static/js/bootstrap-datepicker.js"></script>
<script>
    !function ($) {
        $(document).on("click", "ul.nav li.parent > a > span.icon", function () {
            $(this).find('em:first').toggleClass("glyphicon-minus");
        });
        $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
    }(window.jQuery);

    $(window).on('resize', function () {
        if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
    })
    $(window).on('resize', function () {
        if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
    })

    function register() {
        unm = document.getElementsByName("user")[0].value;
        pwd = document.getElementsByName('password')[0].value;
        pwd2 = document.getElementsByName('password2')[0].value;
        $.ajax({
            data: {
                username: unm,
                password: pwd,
                password2:pwd2
            },
            url:"/register",
            dataType:"text",
            type:"post",
            success:function(data){
                if(data == "YES"){
                    alert('注册成功');
                     window.location.href = "/";
                }
                else{
                    alert("注册失败");
                }
            }
        })
    }
</script>
</body>

</html>
